import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import 'echarts-gl'
import data from '@/assets/world.json'
import '../index.scss'

interface WorldData {
  // 根据world.json文件的实际结构定义数据类型
  // 这里假设它是一个简单的对象，实际可能更复杂
  [key: string]: any
}

const EchartsComponent: React.FC = () => {
  const echartsRef = useRef<HTMLDivElement>(null)
  const worldData: WorldData = data

  useEffect(() => {
    if (!echartsRef.current) return
    const myChart = echarts.init(echartsRef.current)
    let baseTexture: echarts.ECharts | null = null
    let option: echarts.EChartsOption | null = null
    const geoJson: any = worldData

    const getBaseTexture = () => {
      echarts.registerMap('world', geoJson)
      const canvas = document.createElement('canvas')
      baseTexture = echarts.init(canvas, null, {
        width: 4096,
        height: 2048
      })
      baseTexture.setOption({
        geo: {
          type: 'map',
          map: 'world',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90]
          ],
          zoom: 0,
          roam: false,
          itemStyle: {
            borderColor: 'rgba(12, 51, 133, 1.00)',
            normal: {
              areaColor: 'rgba(41, 156, 255, 1.00)',
              borderColor: 'rgba(12, 51, 133, 1.00)'
            },
            emphasis: {
              areaColor: 'rgba(41, 156, 255, 1.00)'
            }
          },
          label: {
            normal: {
              fontSize: 20,
              show: false,
              textStyle: {
                color: '#fff'
              }
            },
            emphasis: {
              fontSize: 30,
              show: false,
              textStyle: {
                color: 'yellow'
              }
            }
          }
        }
      })
      drawEarth()
    }

    const drawEarth = () => {
      option = {
        globe: {
          show: true,
          baseTexture: baseTexture,
          globeRadius: 150,
          displacementQuality: 'medium',
          //shading: "lambert",
          displacementScale: 5,
          shading: 'color',
          light: {
            // 光照阴影
            main: {
              color: '#fff', // 光照颜色
              intensity: 1, // 光照强度
              shadowQuality: 'high', //阴影亮度
              //shadow: true, // 是否显示阴影
              alpha: 40
            },
            ambient: {
              color: '#fff',
              intensity: 1
            }
          },
          viewControl: {
            alpha: 30,
            beta: 160,
            // targetCoord: [116.46, 39.92],
            autoRotate: true,
            autoRotateAfterStill: 10,
            distance: 240,
            label: {
              show: false
            }
          }
        },
        xAxis3D: {},
        yAxis3D: {}
      }
      myChart.setOption(option, true)
    }

    getBaseTexture()

    return () => {
      if (myChart) {
        myChart.dispose()
      }
    }
  }, [])

  return <div className="item1" ref={echartsRef}></div>
}

export default EchartsComponent
